<template>
  <div class="query-page">
    <h1>历史咨询搜索</h1>
    <div class="background-container">

    </div>

    <!-- 查询表单 -->
    <div class="query-form">
      <el-input v-model="query" placeholder="请输入关键词"></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>

    <!-- 查询结果列表 -->
    <div class="query-results">
      <div class="result-item" v-for="(item, index) in paginatedResults" :key="index">
        <div class="result-info">
          <h3>{{ item.name }}</h3>
          <p>{{ item.description }}</p>
          <span>{{ item.type }}</span>
        </div>
        <div class="result-actions">
          <el-button size="small">详情</el-button>
          <el-button size="small" type="primary">预订</el-button>
        </div>
      </div>
    </div>

    <!-- 分页器 -->
    <el-pagination
        v-if="totalPages > 0"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="totalResults"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElInput, ElButton, ElPagination } from 'element-plus';
// eslint-disable-next-line no-unused-vars
import {View} from "@element-plus/icons-vue";

const query = ref('');
const results = ref([
  { name: '餐厅A', description: '高级西餐厅', type: '餐饮' },
  { name: '剧院B', description: '音乐剧表演', type: '娱乐' },
  { name: '夜店C', description: 'DJ音乐派对', type: '娱乐' }
  // 可以根据实际需求添加更多数据
]);
const pageSize = 5; // 每页显示的结果数
const currentPage = ref(1); // 当前页码

const paginatedResults = ref([]);

// 计算总结果数和总页数
const totalResults = ref(results.value.length);
const totalPages = ref(Math.ceil(totalResults.value / pageSize));

// 监听currentPage变化，更新分页结果
const handleCurrentChange = (val) => {
  currentPage.value = val;
  paginateResults();
};

// 分页函数
const paginateResults = () => {
  const startIndex = (currentPage.value - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  paginatedResults.value = results.value.slice(startIndex, endIndex);
};

// 执行初始分页
paginateResults();

// 执行查询
const search = () => {
  // 根据query执行查询逻辑，更新results和totalResults
  results.value = [
    { name: '新餐厅A', description: '高级西餐厅', type: '餐饮' },
    { name: '新剧院B', description: '音乐剧表演', type: '娱乐' },
    { name: '新夜店C', description: 'DJ音乐派对', type: '娱乐' },
    { name: '新餐厅D', description: '特色餐厅', type: '餐饮' },
    { name: '新剧院E', description: '话剧表演', type: '娱乐' },
    { name: '新夜店F', description: '夜间俱乐部', type: '娱乐' },
    { name: '新餐厅G', description: '地道风味', type: '餐饮' },
    { name: '新剧院H', description: '舞台剧表演', type: '娱乐' },
    { name: '新夜店I', description: '主题派对', type: '娱乐' }
    // 模拟查询结果，实际应用中根据后端返回更新
  ];
  totalResults.value = results.value.length;
  totalPages.value = Math.ceil(totalResults.value / pageSize);
  currentPage.value = 1; // 查询后重置当前页为第一页
  paginateResults(); // 更新分页结果
};
</script>

<style scoped>
.query-page {
  width: 1000px; /* 设置整个页面宽度为1000px */
  margin: 0 auto; /* 居中显示 */
  padding: 20px; /* 添加内边距 */
}

.query-form {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.query-results {
  display: grid;
  gap: 20px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 1); /* 使用半透明白色背景 */
}

.result-info {
  flex: 1;
}

.result-actions {
  display: flex;
  align-items: center;
}
.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 将 z-index 设置为负数，确保背景图片在内容之后 */
  background-image: url('@/assets/scene3.jpg');
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-position: center; /* 居中显示背景图片 */
  opacity: 0.6; /* 可选：设置透明度 */
}
</style>